<div class="card mb-4">
    <div class="card-header position-sticky" style="top: 3.90rem; z-index: 12;">
        <h6>Fields
            <span ng-bind="$ctrl.title"></span>
            <a ng-click="$ctrl.addAttr()" class="btn btn-link btn-sm float-right text-primary"><span
                    class="fas fa-plus"></span> Create field</a>
        </h6>
    </div>
    <div class="card-body">
        <div class="alert alert-warning mb-0" role="alert" ng-if="!$ctrl.fields || !$ctrl.fields.length">
            <i class="fas fa-exclamation-triangle text-warning mr-3"></i> No field has been created for this attribute
            yet!
        </div>
        <div dnd-list="$ctrl.fields" dnd-inserted="$ctrl.updateOrders(index)" 
            ng-if="$ctrl.fields.length">
            <div ng-repeat="col in $ctrl.fields track by $index" 
                dnd-draggable="col" dnd-type="'col'"
                dnd-effect-allowed="copyMove" 
                dnd-selected="$ctrl.selectedCol = col"
                dnd-dragstart="$ctrl.dragStart($index)" 
                ng-class="{'selected': $ctrl.selectedCol === col}" class="">

                <div class="form-row">
                    <div class="col-md-1">
                        <small class="fa fa-grip-vertical text-black-50 align-middle" style="cursor: grab"></small>
                    </div>
                    <div class="form-groupx col-md-4">
                        <small class="control-label">Field: <span class="text-black-50"
                                ng-bind="col.name"></span></small>
                        <input ng-model="col.title" placeholder="Title" ng-change="$ctrl.generateName(col)"
                            class="form-control form-control-sm">
                    </div>
                    <div class="form-groupx col-md-2">
                        <small class="control-label">Type</small>
                        <select class="form-control form-control-sm" ng-model="col.dataType"
                            ng-change="$ctrl.changeDataType(col.dataType);">
                            <option ng-repeat="item in $ctrl.settings.dataTypes track by $index" ng-value="item.value">
                                {{item.name}}
                            </option>
                        </select>
                    </div>
                    <div class="form-groupx col-md-4">
                        <div class="" ng-if="col.dataType != 23">
                            <small class="control-label">Value</small>
                            <input ng-model="col.defaultValue" placeholder="Default Value"
                                class="form-control form-control-sm">
                            <!-- <mix-value-editor string-value="col.defaultValue" type="col.dataType">
                            </mix-value-editor> -->
                        </div>
                        <div ng-if="col.dataType == 23">
                            <small>
                                Attribute
                                [ <a ng-click="$ctrl.showReferences(col)" class="btn-link text-primary">Select</a> ]
                            </small> <br />
                            <a ng-if="col.referenceId" href="/portal/attribute-set/details/{{col.referenceId}}"
                                class="btn btn-link"><small>
                                    <span class="fas fa-pen text-primary"></span> Edit attribute
                                    {{col.reference.title}}</small>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="btn-group btn-group-sm float-right">
                            <a href="" class="btn btn-secondary" ng-click="col.showAdvanced = !col.showAdvanced">
                                <span class="far fa-check-square"></span>
                            </a>
                            <a href="" class="btn btn-danger" ng-click="$ctrl.removeAttribute(col, $index)">
                                <span class="fas fa-trash-alt"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="row my-2" ng-show="col.showAdvanced">
                    <div class="col-md-1"></div>
                    <div class="col-md form-check-inline px-2">
                        <div class="custom-control custom-switch mx-2">
                            <input type="checkbox" class="custom-control-input" ng-model="col.isEncrypt"
                                id="{{'isEncrypt_' + $index}}">
                            <label class="custom-control-label" for="{{'isEncrypt_' + $index}}">
                                Encrypt
                            </label>
                        </div>
                        <div class="scustom-control custom-switch mx-2">
                            <input type="checkbox" class="custom-control-input" ng-model="col.isUnique"
                                id="{{'unique_' + $index}}">
                            <label class="custom-control-label" for="{{'unique_' + $index}}">
                                Unique
                            </label>
                        </div>
                        <div class="scustom-control custom-switch mx-2">
                            <input type="checkbox" class="custom-control-input" ng-model="col.isRequire"
                                id="{{'required_' + $index}}">
                            <label class="custom-control-label" for="{{'required_' + $index}}">
                                Required
                            </label>
                        </div>
                        <div class="scustom-control custom-switch mx-2">
                            <input type="checkbox" class="custom-control-input" ng-model="col.isSelect"
                                id="{{'select_' + $index}}">
                            <label class="custom-control-label" for="{{'select_' + $index}}">
                                Select
                            </label>
                        </div>
                        <div class="scustom-control custom-switch mx-2">
                            <input type="checkbox" class="custom-control-input" ng-model="col.isRegex"
                                id="{{'regex_' + $index}}">
                            <label class="custom-control-label" for="{{'regex_' + $index}}">
                                Regex
                            </label>
                        </div>
                    </div>
                </div>

                <div class="row form-group" ng-show="col.isRegex && col.showAdvanced">
                    <div class="col-md-1"></div>
                    <div class="col">
                        <input type="text" class="col form-control form-control-sm" ng-model="col.regex"
                            placeholder="Regular Expression..."></div>
                </div>
                <div ng-show="col.isSelect">
                    <div class="row mb-2">
                        <div class="col-md-1"></div>
                        <div class="col">
                            <div class="form-group">
                                <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                                    ng-enter="$ctrl.addOption(col,$index)"
                                    placeholder="Please type in the value then enter to add to option list...">
                            </div>

                            <div class="form-row" ng-repeat="opt in col.options track by $index">
                                <div class="form-groupx col-md pl-4">
                                    <input type="text" class="form-control form-control-sm"
                                        ng-model="col.options[$index].value">
                                </div>
                                <!-- <div class="form-groupx col-md-3">

                                    <select class="form-control form-control-sm"
                                        ng-model="col.options[$index].dataType">
                                        <option ng-repeat="item in $ctrl.settings.dataTypes track by $index"
                                            ng-value="$index">
                                            {{item}}
                                        </option>
                                    </select>
                                </div> -->
                                <div class="form-groupx col-md-1">
                                    <a class="btn btn-sm" ng-click="col.options.splice($index,1)">
                                        <span class="fas fa-trash-alt text-danger"></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <hr>
            </div>
        </div>
        <div class="row" ng-show="col.showAdvanced">
            <div class="col-md-1"></div>
            <div class="col-md-2">
                <span class="scustom-control custom-switch">
                    <input type="checkbox" ng-model="col.isEncrypt">
                    <label class="custom-control-label">
                        <span>Encrypt</span>
                    </label>
                </span>
            </div>
            <div class="col-md-2">
                <span class="scustom-control custom-switch">
                    <input type="checkbox" ng-model="col.isUnique">
                    <label class="custom-control-label">
                        <span>Unique</span>
                    </label>
                </span>
            </div>
            <div class="col-md-2">
                <span class="scustom-control custom-switch">
                    <input type="checkbox" ng-model="col.isRequire">
                    <label class="custom-control-label">
                        <span>Required</span>
                    </label>
                </span>
            </div>
            <div class="col-md-2">
                <span class="scustom-control custom-switch">
                    <input type="checkbox" ng-model="col.isSelect">
                    <label class="custom-control-label">
                        <span>Select</span>
                    </label>
                </span>
            </div>
        </div>
        <div ng-show="col.isSelect">
            <div class="row">
                <label class="col-sm-3 col-form-label">Title</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                        ng-enter="$ctrl.addOption(col,$index)" placeholder="fill then enter to add options">
                </div>
            </div>
            <div class="row" ng-repeat="opt in col.options track by $index">
                <div class="col-md-10 row">
                    <input type="text" class="col-7 form-control form-control-sm" ng-model="col.options[$index].value">
                    <select class="col-5 form-control form-control-sm" ng-model="col.options[$index].dataType">
                        <option ng-repeat="item in $ctrl.settings.dataTypes track by $index" ng-value="item.value">{{item.name}}
                        </option>
                    </select>

                    <hr>
                </div>

            </div>
        </div>
    </div>

    <modal-navs model-name="'attribute-set'" is-global="'true'" view-type="'read'" selects="'id,title,createdDateTime'"
        is-single="'true'" save="$ctrl.referenceCallback(selected)"></modal-navs>